<!DOCTYPE html>
<html>

<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/validform.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/baseCommon.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                            <i class="fa fa-bars icon"></i>  
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card card_list">
                                <div class="elm-wrap nav">
                                    <form class="form-inline navbar-right mgr0">
                                        <div class="form-group">
                                          <label for="search_name">任务名称：</label>
                                          <input type="text" id='search_name' class="form-control search_name" placeholder="请输入任务名称">
                                        </div>
                                        <button type="button" class="btn btn-info" onclick="searching('task')"  style="margin-left:10px">搜索</button>
                                      </form>
                                </div>
                                <div class="elm-wrap">
                                    <div class="row tasklistvue">
                                        <div class="col-sm-3">
                                            <div class="elm-card elm-card-list elm-card-add" onclick="editing('task')">
                                                <h4 class="title">+</h4>
                                            </div>
                                        </div>
                                        <div class="col-sm-3" v-for="(info,index) in datas">
                                            <div class="elm-card elm-card-list">
                                                <dl class="list">
                                                    <dt class="title">{{info.job_name}}</dt>
                                                    <dd>作业任务类型：<span>{{rText('type',info.job_type)}}</span></dd>
                                                    <dd class="txt" style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display:block">作业岗位：<span>{{info.work}}</span></dd>
                                                    <dd>作业流程监控：<span>{{rText('control',info.is_control)}}</span></dd>
                                                    <dd>作业内容：<span class="txt" style="height: 52px;overflow: hidden;display: block;">{{info.job_content}}</span></dd>
                                                    <dd>标准作业规范：<span class="txt" style="height: 52px;overflow: hidden;display: block;">{{info.job_benchmark}}</span></dd>
                                                </dl>
                                                <div class="btngroup clear">
                                                    <a href="javascript:void(0)" @click="vueEditing(info)"><span class="icon fa fa-pencil-square-o"></span> 编辑</a>
                                                    <span class="fg">|</span>
                                                    <a href="javascript:void(0)" @click="vueDeling(info)"><span class="icon fa fa-trash-o"></span> 删除</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                     
                                </div> 
                            </div>
                            <div class="card card_edit">
                                <div class=" base_info">
                                    <p class="base_info_p">添加/修改作业任务</p>
                                    <p class="base_info_ps">接发车作业流程由作业任务组成</p>
                                    <p class="base_info_ps">编写安全作业标准规范有助于指导职工安全作业</p>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <form class="form-horizontal taskvue ss_form" style="margin-top:30px">
                                            <div class="form-group">
                                                <label for="taskname" class="col-sm-3 control-label">作业任务名称： </label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control taskname" id="taskname" name="taskname" datatype="*" errormsg="请填写正确的作业任务名称" nullmsg="作业任务名称是必填的" placeholder="请输入作业任务名称" v-model="info.title">
                                                    <span class='Validform_checktip' />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="tasktype" class="col-sm-3 control-label">作业任务类型： </label>
                                                <div class="col-sm-9">
                                                    <select class="form-control tasktype" name="tasktype" id="tasktype" placeholder="请选择作业任务类型" v-model="info.type">
                                                        <option value="1">与站台关联</option>
                                                        <option value="2">与站台不关联</option>
                                                    </select> 
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="taskposttype" class="col-sm-3 control-label">岗位类型： </label>
                                                <div class="col-sm-9">
                                                    <select class="form-control taskposttype" name="taskposttype" id="taskposttype" aria-placeholder="请选择作业任务类型" v-model="info.status">
                                                        <option value="2">作业岗位</option>
                                                        <option value="1">作业人员</option>
                                                    </select> 
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="taskpost" class="col-sm-3 control-label">作业岗位： </label>
                                                <div class="col-sm-9">
                                                    <select class="form-control taskpost" name="taskpost" id="taskpost" aria-placeholder="作业岗位" style="width:100%" datatype="select2" errormsg="请选择作业岗位" nullmsg="请选择作业岗位">
                                                    </select>
                                                    <span class='Validform_checktip' /> 
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="taskcontrol" class="col-sm-3 control-label">作业流程监控：</label>
                                                <div class="col-sm-9">
                                                    <div class="radio3 radio-check radio-blue radio-inline">
                                                        <input type="radio" id="radio4" v-model="info.control" name="taskcontrol" value="1">
                                                        <label for="radio4">
                                                            是
                                                        </label>
                                                    </div>
                                                    <div class="radio3 radio-check radio-blue radio-inline">
                                                        <input type="radio" id="radio5" v-model="info.control" name="taskcontrol" value="2">
                                                        <label for="radio5">
                                                            否
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="taskdesc" class="col-sm-3 control-label">作业内容： </label>
                                                <div class="col-sm-9">
                                                    <textarea name="taskdesc" rows="3" class="form-control taskdesc" v-model="info.content" datatype="*" errormsg="请填写正确的作业内容" nullmsg="作业内容是必填的" placeholder="请输入作业内容"></textarea>
                                                    <span class='Validform_checktip' /> 
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="taskstandard" class="col-sm-3 control-label">作业标准规范： </label>
                                                <div class="col-sm-9">
                                                    <textarea name="taskstandard" rows="3" class="form-control taskstandard" v-model="info.standard" datatype="*" errormsg="请填写正确的标准规范" nullmsg="标准规范是必填的" placeholder="请输入标准规范"></textarea>
                                                    <span class='Validform_checktip' /> 
                                                </div>
                                            </div>
                                            <div class="form-group" style="margin-top:60px">
                                                <div class="col-sm-offset-3 col-sm-9">
                                                    <button type="button" class="btn btn-info edited" onclick="uploadData('task')">确认</button>
                                                    <button type="button" class="btn btn-default edit_cancel">取消</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    
                                </div>
                                
                            </div> 
                        </div>   
                    </div>
                </div>
            </div>
        </div>
        <footer class="app-footer">
            <div class="wrapper"></div>
        </footer>
        <div class="modal fade" id="modalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除人员</h4>
                    </div>
                    <div class="modal-body">
                        确定删除人员？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info deling">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Javascript Libs -->
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/common/base.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/validform.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
<script type="text/javascript" src="../lib/js/ztreeJs.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
<script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
<script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
<!-- Javascript -->
<script type="text/javascript" src="../lib/js/common/app.js"></script>

<script>
    navData.accNav1 = 'task'
    navData.nav1Name = '作业管理'
    navData.accNav2 = 'task-base'
    navData.accNav3 = '11'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    var Info={}
    
    function searching(name){
        switch(name){
            case 'task':
                var _upData={
                    'title':$('.search_name').val(),
                }
                taskListInit(_upData)
            break;
        }
    } 
    var taskListVue = new Vue({
        el:".tasklistvue",
        data:{
            datas:[]
        },
        computed:{
        },
        methods:{
            rText:function(name,type){
                var _txt='';
                switch(name){
                    case 'type':
                        type == 1?_txt = '与站台关联': _txt = '与站台不关联'
                    break;
                    case 'control':
                        type == 1?_txt = '是': _txt = '否'
                    break;
                }
                return _txt
            },
            vueEditing:function(elm){
                $.post(serverUrl.base+serverUrl.workTask+'EditWorkTask',{'id':elm.job_id},function(res){
                    if(res.code == '0'){
                        var _tempData = $.extend('',elm,res.data) 
                        editing('task',_tempData)
                    }else{
                        alert('失败')
                    }
                },'json').complete(function(res){
                    

                }).error(function(res){
                    console.log(res)
                })
            },
            vueDeling:function(elm){
                $.post(serverUrl.base+serverUrl.workTask+'EditWorkTask',{'id':elm.job_id},function(res){
                    if(res.code == '0'){
                        var _tempData = $.extend('',elm,res.data) 
                        delingModal('task',_tempData)
                    }else{
                        alert('失败')
                    }
                },'json').complete(function(res){
                    

                }).error(function(res){
                    console.log(res)
                })
            }
            
        },
        beforeCreate:function(){
            taskListInit()
        },
        created:function(){
            
        },
        mounted:function(){
        },
        beforeUpdate:function(){
        },
        updated:function(){          
        },
        watch:{
        }
    })
    var taskVue = new Vue({
        el:".taskvue",
        data:{
            count:0,
            info:{
                id:'',
                title:'',
                type:'1',
                status:'2',
                content:'',
                standard:'',
                control:'2'
            }
        },
        computed:{
        },
        methods:{
        },
        created:function(){
            
        },
        mounted:function(){
            newSelectDevice();
        },
        beforeUpdate:function(){
        },
        updated:function(){          
        },
        watch:{
        }
    })
    //编辑
    function editing(name,elm){
        Info={}
        switch(name){
            case 'task':
                $('.card_edit').show()
                $('.card_list').hide()
                
                Info = { 
                    id:'',
                    title:'',
                    type:'1',
                    status:'2',
                    content:'',
                    standard:'',
                    control:'2',
                    job_post:[]
                },_tempInfo={}
                if(arguments[1]){
                    _tempInfo = {
                        id:elm.job_id?elm.job_id:'',
                        title:elm.job_name,
                        type:elm.job_type,
                        status:elm.post_type_id,
                        content:elm.job_content,
                        standard:elm.job_benchmark,
                        control:elm.is_control,
                        job_post:elm.job_post.split(',')
                    }
                }else{
                    _tempInfo = Info
                }
                taskVue.info = _tempInfo;
                //$('.taskpost').select2('clear')
                $('.taskpost option').remove()
                new rpSelect({
                    sel:'taskpost',
                    data:{post_type_id:taskVue.info.status,post_duty:'3'},
                    url:serverUrl.base+serverUrl.count+'work_post_list',
                    placeholder:'选择作业岗位',
                    calfn:function(){
                        $('.taskpost').val(taskVue.info.job_post).trigger('change')
                    }
                    
                })
            break;
            default:
                $('.card_edit').show()
                $('.card_list').hide()
                Info = {}
            break;
        }
        if(arguments[1]){
            if(name == 'train' || name == 'task'){
                Info.rowData = elm
            }else{
                Info.row = $(elm).parents('tr')
            }
        }
    }
    //删除
    function delingModal(name,elm){
        var _text={
            tit:'删除',
            body1:'确定删除吗？',
            body2:'删除出现问题',
            btn1:'确定',
            cbtn1:'取消',
            cbtn2:'知道了',
            deltit1:'删除成功',
            deltit2:'删除失败',
            delbody1:"删除成功！",
            delbody2:"出现问题",
        },_datas={
            id:'',
            data:{},
            url:''
        }
        switch(name){
            case 'task':
                if(arguments[1]){
                    _datas.data={
                        id:elm.job_id
                    }
                    _text.body1 = '确定删除该作业任务么？'
                }

                _datas.url = serverUrl.base+serverUrl.workTask+'DeleteWorkTask'
                _text.tit = '删除作业任务'
                $('#modalDel').find('.modal-title').text(_text.tit)
                $('#modalDel').find('.modal-body').text(_text.body1)
                $('#modalDel').modal()
            break;
            default:
            break;
        }
        $('.deling').off('click').on('click',function(){
            $.post(_datas.url,_datas.data,function(res){
                $('#modalDel').modal('hide')
                if(res.code == 0){
                    setTimeout(function(){
                        $('#modalTips').find('.modal-body').text(_text.deltit1)
                        $("#modalTips").modal()    
                    },500)
                    if(Info.row){
                        _dataTable.row(Info.row).remove().draw(false)
                    }else if(!Info.row && Info.rowData){
                        _dataTable.rows({selected:true}).remove().draw(false)
                    }else{
                        taskListInit()
                    }
                    
                }else{
                    setTimeout(function(){
                        $('#modalTips').find('.modal-body').text(_text.deltit2)
                        $("#modalTips").modal()    
                    },500)
                }
            },'json').error(function(res){
                $('#modalDel').modal('hide')
                setTimeout(function(){
                    $('#modalTips').find('.modal-body').text(_text.delbody2)
                    $("#modalTips").modal()    
                },500)
            }).complete(function(){
                $('#modalDel').modal('hide')
            })
        })
        
    }  
        
    //提交 
    function uploadData(name){
        switch(name){
            case 'task':
            //var _dataTableRow=_dataTable.row(Info.row)
            if(!myValidform.check()){
                return false
            }
            var _upData = taskVue.info
            var _urlapi = 'AddWorkTask'
            var upData={
                title:_upData.title,
                type:_upData.type,
                status:_upData.status,
                post_user:$('.taskpost').val().join(','),
                content:_upData.content,
                standard:_upData.standard,
                control:_upData.control  
            }
            if(_upData.id && _upData.id != ''){
                upData.id = _upData.id
                _urlapi = 'Savetask'
            }
            // console.log(upData)
            $('.card_edit').loading('open')
            $.ajax({
                url:serverUrl.base+serverUrl.workTask+_urlapi,
                type:"POST",
                data:upData,
                dataType:"json",
                success:function(res){
                    if(res.code == 0){
                        //更新表格
                        // _dataTable.settings()[0].ajax.data={'department_id':Info.department_id}
                        // _dataTable.ajax.reload()
                        var _info='作业任务添加成功！',_text='添加成功'
                        if(Info.row){
                            _info = '作业任务修改成功！'
                            _text = '修改成功'
                        }
                        taskListInit()
                        $("#modalTips").find('.modal-title').text(_text) 
                        $("#modalTips").find('.modal-body').text(_info)
                        $('.card_edit').hide()
                        $('.card_list').show()
                    }else if(res.code == '2'){
                        $("#modalTips").find('.modal-title').text('出现问题') 
                        $("#modalTips").find('.modal-body').text(res.info)
                    }
                    setTimeout(function(){
                        $("#modalTips").modal()   
                        $("#modalTips").find('.modal-body').text(res.info) 
                    },500)
                },
                complete:function(res){
                    $('#modalDel').modal('hide')
                    $('.card_edit').loading('close')
                },
                error:function(res){
                    $("#modalTips").find('.modal-title').text('出现问题') 
                    $("#modalTips").find('.modal-body').text(res.info)
                    setTimeout(function(){
                        $("#modalTips").modal()    
                    },500)
                }    
            })
            break;
        }
    }
    //取消
    $('.edit_cancel').on('click',function(){
        Info.row && _dataTable.row(Info.row).deselect()
        Info={}
        $('.card_edit').hide()
        $('.card_list').show()
    })
    // var myValidform = $(".ss_form").Validform({
    //     tiptype:2,
    //     datatype:{
    //         ztreegroup:function(gets,obj,curform,regxp){
    //             console.log(gets)
    //             if(gets == ''){
    //                 return false
    //             }else{
    //             }
    //         },
    //         select2:function(gets,obj,curform,regxp){
    //             if(gets.length ==0){
    //                 $('.select2-selection').css('borderColor','red')
    //                 return false
    //             }else{
    //                 $('.select2-selection').css('borderColor','#ccc')
    //             }
    //         }
    //     }
    // });
    var myValidform = $(".ss_form").Validform({
        tiptype:3,
        datatype:{
            putso:function(gets,obj,curform,regxp){
                /*参数gets是获取到的表单元素值，
				  obj为当前表单元素，
				  curform为当前验证的表单，
				  regxp为内置的一些正则表达式的引用。*/
                var _checkpwrap = obj.parents('.checkpwrap')
                var _type = _checkpwrap.find('.checkp').val()
                var _userid = _checkpwrap.find('.userid').val()
                var _post = _checkpwrap.find('.post').val()
                var reg1=regxp["*"],
					reg2=/[\d]{7}/,
					mobile=curform.find(".mobile");
                if(obj){
                    if(_type == '1'){
                        //人
                        //console.log(_userid)
                        if(reg1.test(_userid)){return true;}
                    }else if(_type == '3'){
                        //岗位
                        if(reg1.test(_post)){return true;}
                    }
                }
                return false;
            },
            ztreegroup:function(gets,obj,curform,regxp){
                if(gets == ''){
                    return false
                }else{
                }
            },
            select2:function(gets,obj,curform,regxp){
                if(gets.length ==0){
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','red')
                    return false
                }else{
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','#ccc')
                }
            }
        }
    });
    // $(document).on('click','.treegroup',function(){
    //     showsDeptWin(null,'select','dep','depid','emp','single',myValidform);
    // })
    function taskListInit(data){
        var _tDatas=$.extend({_:Math.random()},data)
        $.post(serverUrl.base+serverUrl.workTask+'ListWorkTask',_tDatas,function(res){
            if(res.code == '0'){
                taskListVue.datas =  res.data 
            }else{
                alert('失败')
            }
        },'json').complete(function(res){

        }).error(function(res){

        }).complete(function(){
            $('body').loading('close')
        })
    }
    function newSelectDevice(ids){
        
    }
    $('.taskposttype').change(function(){
        var _val = $('select[name=taskposttype]').val()
        // console.log($('select[name=taskposttype]').val())
        $('.taskpost option').remove()
        new rpSelect({
            sel:'taskpost',
            data:{post_type_id:_val,post_duty:'3'},
            url:serverUrl.base+serverUrl.count+'work_post_list',
            placeholder:'选择作业岗位'
        })
    })
    new rpSelect({
        sel:'taskpost',
        data:{post_type_id:'2',post_duty:'3'},
        url:serverUrl.base+serverUrl.count+'work_post_list',
        placeholder:'选择作业岗位'
    })
</script>
</body>

</html>
